/**
 * @description  结果表（VAR分析）
 * @author zht
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { Tooltip } from 'antd';
import { SecondHeaderC, TableC } from '../../../../comps';
import style from './index.less';
import _ from 'lodash';

class ResultCharts extends PureComponent {
  constructor() {
    super();
    this.state = {
      columns: [], //表格首行
      dataSource: [], //表格内容
      currentPage: 1, //当前页码
      numInPage: 6, //每页条数
    };
  }

  componentDidMount() {
    const { formData } = this.props;
    if (formData) {
      this.getData(formData);
    }
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (JSON.stringify(nextProps.formData) !== JSON.stringify(this.props.formData)) {
      this.getData(nextProps.formData);
    }
  }

  //获取数据
  getData = (formData) => {
    this.props.dispatch({
      type: 'varAnalysisM/queryresultCharts',
      payload: {
        ...formData,
        currentPage: 1,
        numInPage: 6,
      },
      callback: (data) => {
        if (data && data.dataSource.length && data.columns.length) {
          const solumnss = this.changeColumns(data.columns);
          this.setState({
            columns: solumnss,
            dataSource: data.dataSource,
          });
        } else {
          this.setState({
            columns: [],
            dataSource: [],
          });
        }
      },
    });
  };

  // 表格首行添加ICON图标
  addIcon = (str) => {
    return str == 'VaR' ? (
      <div>
        {' '}
        <span>VaR</span>
        <Tooltip
          title={
            <div>
              <div>此为历史VaR，</div>
              <div>观察天数为251天。</div>
            </div>
          }
        >
          <QuestionCircleOutlined style={{ paddingLeft: '7px' }} />
        </Tooltip>
      </div>
    ) : (
      str
    );
  };

  // 优化表格展示
  changeColumns = (columns) => {
    const newColumns = _.cloneDeep(columns);
    if (newColumns && newColumns.length) {
      newColumns.map((item) => {
        if (item.key == 'INDICATOR') {
          item.render = (text, record) => {
            return this.addIcon(text);
          };
        }
      });
    }
    newColumns.forEach((value, index) => {
      if (value.key == 'BENCHMARK' || value.key == 'PORT') {
        value['type'] = 'number';
      }
    });
    return newColumns;
  };

  //表格展示
  showTable = () => {
    const { columns, dataSource } = this.state;
    return (
      <div>
        <TableC
          columns={columns}
          loading={this.props.loading}
          dataSource={dataSource}
          rowKey='INDICATOR'
          hidePage={true}
          rowClassName={(record, index) => {
            return index <= 1 ? 'tableSize' : ''; //表格前两行样式
          }}
        />
      </div>
    );
  };

  render() {
    return (
      <div className={style.tableRow}>
        <SecondHeaderC title='结果表' />
        {this.showTable()}
      </div>
    );
  }
}
export default connect(({ varAnalysisM, loading }) => ({
  varAnalysisM,
  loading: loading.effects['varAnalysisM/queryresultCharts'],
}))(ResultCharts);
